<template>
  <div class="frame-branch">
    <div v-frame="branchLoading" class="frame w-full flex flex-col items-center">
      <div v-frame-item class="w-[100px] mb-5 rounded-[10px]">123123</div>
      <div v-frame-item class="w-[200px] mb-5 rounded-[10px]">434545</div>
      <div class="w-[400px]">
        <div v-frame-item class="mb-5 rounded-[10px]">999999</div>
        <div v-frame-item class="rounded-[10px]">44232131231231</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const branchLoading = ref(true)

onMounted(() => {
  setTimeout(() => {
    branchLoading.value = false
  }, 3500)
})
</script>

<style lang="less" scoped>
.frame-branch {
  position: relative;
  display: flex;
  justify-content: center;
  .frame {
    width: 500px;
    display: flex;
    align-items: baseline;
    span {
      text-align: left;
    }
    div {
      text-align: left;
    }
  }
}
</style>
